<template>
  <div id="app" v-bind:style="{ height: screeHeight + 'px' }">
    <!-- <div class="title">
      <h3 class="name">五域创客工作管理系统</h3>
      <h6>Five Domain Maker Work Management System</h6>
    </div> -->
    <div class="boxLogin">
      <!-- 左边 -->
      <div class="borcast" v-if="currImgs">
        <el-carousel height="600px" arrow="never">
          <el-carousel-item v-for="(curImg, index) in currImgs" :key="index">
            <img :src="ImgHttps + curImg" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 右边 -->
      <div class="main">
        <transition name="fade" mode="out-in">
          <div class="form" v-if="forget">
            <p class="form_top">
              <img src="../../assets/newlogo.png" alt="" />
            </p>
            <p
              style="
                color: #666;
                font-size: 15px;
                padding-left: 38px;
                margin-bottom: 20px;
              "
            >
              欢迎登录
            </p>
            <el-form :model="loginForm" ref="loginForm" :rules="rules">
              <el-form-item>
                <div class="style">
                  <img
                    src="../../assets/icon/icon24_sginin_xitong.png"
                    alt=""
                  />
                  <el-select
                    v-model="loginForm.system"
                    placeholder="请选择系统"
                    size="medium"
                  >
                    <el-option
                      v-for="items in systemlist"
                      :key="items.dictId"
                      :label="items.dictName"
                      :value="items.dictId"
                    ></el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item prop="username">
                <!-- <div class="style">
                  <img
                    src="../../assets/icon/icon24_sginin_yonghuming.png"
                    alt=""
                  />
                  <el-input
                    v-model="loginForm.username"
                    autocomplete="on"
                    placeholder="请输入用户名"
                    class="form-input"
                    @keyup.enter.native="submit('loginForm')"

                  ></el-input>
                </div> -->

                <!-- <div class="style">
                  <img src="../../assets/icon/icon24_sginin_mima.png" alt="" />
                  <el-input
                    v-model="loginForm.password"
                    autocomplete="on"
                    placeholder="密码"
                    show-password
                    class="form-input"
                    @keyup.enter.native="submit('loginForm')"
                    size="medium"
                  ></el-input>
                </div> -->
                <div class="userStyle">
                  <el-input
                    v-model="loginForm.username"
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    @keyup.enter.native="submit('loginForm')"
                  >
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <div class="passStyle">
                  <el-input
                    v-model="loginForm.password"
                    placeholder="密码"
                    prefix-icon="el-icon-lock"
                    show-password
                    @keyup.enter.native="submit('loginForm')"
                  >
                  </el-input>
                </div>
              </el-form-item>
              <!-- <el-button
                type="warning"
                plain
                @click="submit('loginForm', 1)"
                id="btnone"
                >登录并前往绑定旧账号</el-button
              > -->
              <el-button
                @click="submit('loginForm', 2)"
                id="btn"
                :class="[btnStyle == true ? 'blue' : 'gray']"
                >登录</el-button
              >
              <br />
              <div class="info">
                <el-checkbox
                  v-model="checked"
                  style="color: #a0a0a0"
                  class="record"
                  >一周内自动登录</el-checkbox
                >
                <!-- <p @click="forgerEvent()">忘记密码?</p> -->
              </div>
            </el-form>
          </div>
        </transition>
        <transition name="fade" mode="in-out">
          <div class="form" v-if="!forget">
            <p class="form_top">
              <img src="../../assets/newlogo.png" alt="" />
              <span>五域创客工作管理系统</span>
            </p>
            <el-form :model="forgetPass" ref="forgetPass" :rules="rulesForget">
              <el-form-item prop="username">
                <el-input
                  v-model="forgetPass.username"
                  autocomplete="on"
                  placeholder="请输入手机号"
                  class="form-input"
                  ><template slot="prepend"
                    ><i class="el-icon-user"></i></template
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="forgetPass.password"
                  autocomplete="on"
                  placeholder="验证码"
                  class="form-input"
                  ><template slot="append"
                    ><span @click="start" v-if="!isShow">获取验证码</span>
                    <van-count-down
                      v-if="isShow"
                      :auto-start="false"
                      format="ss 秒"
                      ref="countDown"
                      @finish="finish"
                      :time="60000"
                    /> </template
                ></el-input>
              </el-form-item>
              <el-button
                type="primary"
                plain
                @click="submit('forgetPass')"
                id="btn"
                >下一步</el-button
              >
              <br />
              <div class="info">
                <!-- 	<el-checkbox v-model="checked" style="color:#a0a0a0;" class='record'>一周内自动登录</el-checkbox> -->
                <p @click="clance">取消</p>
              </div>
            </el-form>
          </div>
        </transition>
      </div>
    </div>
    <!-- 背景图片 -->
    <div class="bg_sginin">
      <img
        src="../../assets/bg_sginin.png"
        v-bind:style="{ height: screeHeight + 'px' }"
      />
    </div>

    <!-- 备案 -->
    <div class="keep">
      <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备17071851号</a
      >&nbsp;<span>版权所有 © 广东九航商业发展有限公司</span>
    </div>

    <!-- 绑定旧账号对话框 -->
    <el-dialog
      title="迁移到新账号"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="setPasswordDialogVisible"
      width="25%"
      :before-close="handleClose"
    >
      <el-form
        ref="formPass"
        style="margin: 0"
        :model="formPass"
        :rules="rulesFormPass"
        label-width="90px"
      >
        <el-form-item label="五域账号" prop="account">
          <el-input
            type="text"
            maxlength="24"
            style="width: 250px"
            placeholder="请输入五域账号"
            v-model="formPass.account"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="setPasswordDate">
          <el-input
            type="password"
            style="width: 250px"
            placeholder="请输入五域账号密码"
            v-model="formPass.setPasswordDate"
          ></el-input>
        </el-form-item>
        <span class="former">（旧账号）</span>
      </el-form>
      <span slot="footer">
        <el-button
          type="primary"
          id="footreBtn"
          @click="setPasswordConfirm('formPass')"
          >绑定新账号</el-button
        >
      </span>
    </el-dialog>
    <!-- 绑定旧账号对话框结束 -->
    <!-- 提示对话框 -->
    <el-dialog
      title="欢迎使用五域系统V1.1.0"
      class="hintDialog"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="firstDialogVisible"
      width="30%"
      :before-close="firstHandleClose"
    >
      <div class="centerDialog">
        欢迎使用五域系统，是否需要<span style="color: red">绑定</span
        >旧五域账号<span style="color: red">（同步订单、客户）</span
        >信息？如不需要或稍后绑定请关闭。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button id="later" @click="laterBinding">关闭</el-button>
        <el-button type="primary" id="immediately" @click="goGinding"
          >前往绑定</el-button
        >
      </span>
    </el-dialog>
    <!-- 提示对话框结束 -->
    <!-- 版本提示 -->
    <el-dialog
      title=""
      :visible.sync="versionsDialogVisible"
      width="45%"
      class="versions"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-steps :align-center="true" :active="active" finish-status="success">
        <el-step title="登录账号调整"> </el-step>
        <el-step title="账号同步"> </el-step>
        <el-step title="更新介绍"> </el-step>
      </el-steps>
      <div v-show="active == 0" class="one">
        <p>一、登录账户调整</p>
        <span
          >原五域账户已暂停登录，请使用钉钉手机账号登录五域系统，初始密码为手机后六位。</span
        >
        <div class="one_box" style="margin: 50px 0">
          <div class="one_box_wu">五</div>
          <div class="dottedline"></div>
          <div class="dingdingBox">
            <img src="../../assets/icon_dingding.png" alt="" />
          </div>
        </div>
      </div>
      <div v-show="active == 1" class="two">
        <p>二、账号同步</p>
        <span>如何同步原有五域账号客户数据、订单？</span>

        <div class="two_box">
          <div>
            <div class="imgbox">
              <img src="../../assets/img_2.png" alt="" />
            </div>
            <span style="font-size: 14px; color: #666666"
              >1.输入钉钉账号密码，点击【登录并前往绑定旧账号】</span
            >
          </div>
          <div>
            <div class="imgbox">
              <img src="../../assets/img_3.png" alt="" />
            </div>
            <span style="font-size: 14px; color: #666666"
              >2.输入五域账号、密码，确认无误后点击【绑定新账号】</span
            >
          </div>
        </div>
      </div>
      <div v-show="active == 2" class="three">
        <p>三、更新介绍</p>
        <p style="font-size: 15px; line-height: 46px">欢迎使用五域创客V1.1.0</p>
        <p>五域创客新功能升级：</p>
        <p style="text-indent: 2em; font-size: 14px; line-height: 25px">
          此次升级主要针对“钉钉组织架构同步”、“物流订单统计”核心功能的上线，具体如下：
        </p>
        <p style="text-indent: 2em; font-size: 14px; line-height: 25px">
          1、上线【钉钉组织架构同步】，五域系统组织架构与钉钉保持一致，原五域账号暂停登录，改为钉钉账号登录；
        </p>
        <p style="text-indent: 2em; font-size: 14px; line-height: 25px">
          2、上线【物流订单统计】，内部系统的订单统计，可操作备货、已备货、发货、验收、导出订单等；
        </p>
        <p style="text-indent: 2em; font-size: 14px; line-height: 25px">
          3、五域系统进行了优化
        </p>
        <p style="text-indent: 2em; font-size: 14px; line-height: 25px">
          如有疑问，请联系相关人员或IT部，感谢😘~
        </p>
        <p style="margin-top: 20px">物流订单统计（如下图所示)：</p>
        <div class="imgbox" style="margin-top: 20px">
          <img src="../../assets/img_dingdan.png" alt="" />
        </div>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: center; align-items: center"
      >
        <el-button
          v-if="active != 0"
          @click="back"
          style="width: 188px; color: #3395fb; border: 1px solid #3395fb"
          >上一步</el-button
        >
        <el-button :type="count == 0 ? 'primary' : 'info'" @click="next">{{
          btnContent
        }}</el-button>
        <span v-if="count != 0" style="color: #3395fb; margin-left: 12px"
          >倒计时{{ count }}s</span
        >
      </span>
    </el-dialog>
    <!-- 版本提示 -->
  </div>
</template>

<script>
import { getCookie } from '../../utils/index.js'
export default {

  data () {
    return {
      time: 60000,
      isShow: false,
      loginForm: {
        system: '1',
        username: '',
        password: ''
      },
      forgetPass: {
        username: '',
        password: ''
      },
      screeHeight: 600,
      checked: this.getCookieValue('checked') == 'true',
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
          // { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
          }
        ]
      },
      rulesForget: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      currImgs: [],
      imgs: [],
      index: 0,
      forget: true,
      systemlist: [],
      setPasswordDialogVisible: false,
      firstDialogVisible: false,
      formPass: {
        account: '',
        setPasswordDate: ''
      },
      rulesFormPass: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        setPasswordDate: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
          }
        ]
      },
      state: false,
      token: '',
      btnStyle: false,
      active: 0,
      versionsDialogVisible: false,
      btnContent: '我知道了，继续了解',
      count: '', // 倒计时
      show: false
    }
  },
  watch: {
    loginForm: {
      deep: true,
      handler (newVal, oldVal) {
        if (newVal.username !== '' || newVal.password !== '') {
          this.btnStyle = true
        } else {
          this.btnStyle = false
        }
      }
    },
    active: {
      handler (newVal, oldVal) {
        if (newVal == 2) {
          this.btnContent = '我知道了，进入五域系统'
        }
      }
    }
  },
  created () {
    // let first = localStorage.getItem("first")
    // if (first) {
    //   this.versionsDialogVisible = false
    // } else {
    //   this.versionsDialogVisible = true
    //   this.threeGo()
    // }

    // this.systemAxios();
    this.getDictionaries('win_global_type')

    if (this.$route.query.type === 0) {
      this.$message.error('token已过期请重新登录')
    }

    var h = document.documentElement.clientHeight || document.body.clientHeight
    this.screeHeight = h // 减去页面上固定高度height

    window.onresize = () => {
      var h =
        document.documentElement.clientHeight || document.body.clientHeight
      this.screeHeight = h // 减去页面上固定高度height
    }
    this.broadcast()
  },
  updated () {
    var h = document.documentElement.clientHeight || document.body.clientHeight
    this.screeHeight = h // 减去页面上固定高度height
  },
  mounted () {
    if (this.getCookieValue('checked') == 'true') {
      this.getcookie()
    }
  },
  methods: {
    // 上一步
    back () {
      this.active--
      this.count = 0
    },
    // 倒计时三秒
    threeGo () {
      const TIME_COUNT = 3
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },

    // 步骤提示下一步按钮
    next () {
      if (this.show == true) {
        if (this.active++ != 2) {
          this.threeGo()
        } else {
          localStorage.setItem('first', true)
          this.versionsDialogVisible = false
        }
      }
    },
    // 弹框稍后绑定事件
    laterBinding () {
      this.firstDialogVisible = false
      this.login()
    },
    // 弹框按钮前往绑定按事件
    goGinding () {
      this.firstDialogVisible = false
      this.setPasswordDialogVisible = true
      this.state = false
    },
    // 弹框关闭按钮
    handleClose () {
      this.setPasswordDialogVisible = false
    },
    // 第一次登录弹出的弹框的关闭事件
    firstHandleClose () {
      this.firstDialogVisible = false
    },

    // 获取字典数据 - 系统下拉框字典组
    getDictionaries (type) {
      const params = { groupId: type }
      this.$api.dictionariesOld(params).then((res) => {
        this.systemlist = res.data
      }).catch((err) => {
        console.log(err)
      })
    },

    finish () {
      this.isShow = false
      if (this.$refs.countDown) {
        this.$refs.countDown.reset()
      }
    },
    start () {
      this.isShow = true
      this.$nextTick(function () {
        this.$refs.countDown.start()
      })
    },
    pause () {
      this.$refs.countDown.pause()
    },
    // 轮播开始
    startChange: function () {
      var _this = this
      setInterval(function () {
        if (_this.index < _this.imgs.length - 1) {
          _this.index++
        } else {
          _this.index = 0
        }
        _this.currImgs.splice(0, 1, _this.imgs[_this.index])
      }, 4000)
    },
    broadcast () {
      this.axios
        .get('/sys/v1/sys/index/images?type=0', {
          headers: {
            Authorization: '',
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            for (var i = 0; i < res.data.length; i++) {
              this.imgs.push(res.data[i])
            }
            this.currImgs = res.data
            // this.play();
            this.startChange()
          } else {
            if (localStorage.getItem('token')) {
              this.$message.error(res.message)
            }
          }
        })
    },
    submit (formName, e) {
      // debugger
      // this.firstDialogVisible = true
      this.$refs[formName].validate((valid) => {
        const self = this
        if (valid) {
          // 判断复选框是否被勾选 勾选则调用配置cookie方法
          if (self.checked == true) {
            // 传入账号名，密码，和保存天数3个参数
            self.setCookie(
              self.loginForm.username,
              self.loginForm.password,
              self.checked,
              7
            )
          } else {
            // 清空Cookie
            self.clearCookie()
          }
          // 跳转系统 + 加密
          if (self.loginForm.system == 3) {
            const url = {
              password: self.loginForm.password,
              username: encodeURI(this.loginForm.username)
            }
            window.location =
              'http://msys.jiuhangjituan.cn/#/login?param=' + window.btoa(JSON.stringify(url))
          } else {
            self.login(e)
          }
        } else {
          self.$message({ type: 'error', message: '用户名或密码错误' })
          return false
        }
      })
    },
    // 设置密码确定按钮
    setPasswordConfirm (formPass) {
      this.$refs[formPass].validate((valid) => {
        if (valid) {
          const data = {
            username: this.formPass.account,
            password: this.formPass.setPasswordDate
          }
          this.$api.bindOldAccount(data).then(res => {
            if (res.code == 0) {
              this.$message.success('迁移成功，请登录钉钉账号继续使用五域系统”')
              this.setPasswordDialogVisible = false
              this.login()
            } else {
              this.$message.error(res.message + '请重试或联系管理员')
            }
          })
        } else {
          return false
        }
      })
    },
    // 登录接口
    login (e) {
      this.axios
        .post(
          '/auth/oauth/token?client_id=web&grant_type=password&scope=server&client_secret=123456&password=' +
          this.loginForm.password +
          '&username=' +
          encodeURI(this.loginForm.username),
          {
            headers: {
              Authorization: '',
              isLoading: false
            }
          }
        )
        .then((res) => {
          this.$store.commit('token', res.access_token)
          const userId = res.user_id
          this.axios.get(`/sys/v1/user/employee/get/roleNames?employeeId=${userId}`).then((res) => {
            sessionStorage.setItem('role', res.data)
          })

          if (!this.is_null(res.code)) {
            this.$message({ type: 'warning', message: res.message })
          } else {
            this.$store.commit('token', res.access_token)
            this.getToken(res.access_token, e)
          }
        })
    },
    // 获取token
    getToken (n, e) {
      this.axios
        .get('/sys/v1/user/getInfo?winType=' + this.loginForm.system, {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          console.log(res)
          //   if (e == 1 && res) {//e == 1 ---表示登录并绑定旧账号按钮
          //   this.setPasswordDialogVisible = true;
          // }
          if (res.data.dingId == '' && res.data.userType !== '1') {
            this.$message.warning('请使用钉钉账号登录系统！')
            return false
          } else if (e == 1 && res) {
            this.setPasswordDialogVisible = true
            return false
          }

          if (res.data.flag == 0 && e == 2) { // firstLogin=（1--钉钉首次登录）（0--不是钉钉首次登录） e == 1 登录并绑定  e==2 登录按钮
            // this.firstDialogVisible = true
            return false
          }
          if (res.code == 0) {
            this.$store.commit('user_id', res.data.id)
            let array = ''
            if (this.is_null(res.data.salesAuthorityId)) {
              array = ''
            } else {
              array = res.data.salesAuthorityId
            }
            this.$store.commit('salesAuthorityId', array)
            const sess = {
              parentOrgName: res.data.parentOrgName,
              orgName: res.data.orgName,
              reallyName: res.data.reallyName,
              positionName: res.data.positionName,
              img: res.data.avatarUrl
            }
            sessionStorage.setItem('personInfo', JSON.stringify(sess))
            sessionStorage.setItem('positionCode', res.data.positionCode)
            sessionStorage.setItem('orgCode', res.data.orgCode)
            sessionStorage.setItem(
              'orgCodes',
              JSON.stringify(res.data.orgCodes)
            )
            sessionStorage.setItem('userInfo', JSON.stringify(res.data))
            // this.$message({ type: "success", message: "登录成功" });
            this.limits()
          } else {
            this.$message({ type: 'warning', message: res.message })
          }
        })
    },
    // 登录接口
    getcookie () {
      var arr = document.cookie.split('; ')
      if (document.cookie.length > 0) {
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          if (arr2[0] == 'userName') {
            this.loginForm.username = arr2[1] // 保存到保存数据的地方
          } else if (arr2[0] == 'password') {
            this.loginForm.password = arr2[1]
          }
        }
        this.checked = true
        if (!this.$route.query.type) {
          this.submit('loginForm')
        }
      }
    },
    getCookieValue (c_name) {
      let c_start, c_end
      if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + '=')
        if (c_start != -1) {
          c_start = c_start + c_name.length + 1
          c_end = document.cookie.indexOf(';', c_start)
          if (c_end == -1) c_end = document.cookie.length
          return unescape(document.cookie.substring(c_start, c_end))
        }
      }
      return ''
    },
    forgerEvent () {
      this.clearCookie()
      this.forget = false
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
    },
    // 取消clance
    clance () {
      this.isShow = false
      if (this.$refs.countDown) {
        this.$refs.countDown.reset()
      }
      this.forget = true
    },
    // 设置cookie
    setCookie (c_name, c_pwd, c_ckd, exdays) {
      var exdate = new Date() // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie =
        'userName' + '=' + c_name + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie =
        'password' + '=' + c_pwd + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie =
        'checked' + '=' + c_ckd + ';path=/;expires=' + exdate.toGMTString()
    },
    // 权限处理
    limits () {
      this.axios
        .get('/sys/v1/menu/button/user/tree?winType=' + this.loginForm.system, {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            sessionStorage.setItem('limit', JSON.stringify(res.data))
            if (res.data.menuTreeList) {
              console.log(res)
              const juade = res.data.menuTreeList.find(
                (res) => res.code == 'index'
              )
              if (this.loginForm.system == '2') {
                this.$router.replace('dashboard')
              } else {
                console.log(juade, 'juade')
                if (juade) {
                  // this.$router.replace('home')
                  this.$router.replace('home/welcome') // 如果没有配置菜单权限就跳到欢迎页面
                } else {
                  if (res.data.menuTreeList[0].children) {
                    this.$router.replace(res.data.menuTreeList[0].children[0].jumpUrl)
                  } else {
                    this.$router.replace(res.data.menuTreeList[0].jumpUrl)
                  }
                }
              }
            } else {
              this.$message({ type: 'warning', message: res.message })
            }
          } else {
            if (res.code == 103) {
              this.$router.replace('home/welcome') // 如果没有配置菜单权限就跳到欢迎页面
            }
            // this.$message({ type: "warning", message: res.message });
          }
        })
    },
    is_null (content) {
      if (content) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped lang="scss">
#app {
  width: 100%;
  height: 100%;
  position: relative;
}
.boxLogin {
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  left: 50%;
  display: flex;
  justify-content: flex-end;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  overflow: hidden;
  .borcast {
    height: 600px;
    width: 400px;
    img {
      width: 100%;
      display: block;
      height: 600px;
    }
  }
}

.keep {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #999;
  font-size: 14px;
  text-decoration: none;
  a {
    color: #999;
    font-size: 14px;
    text-decoration: none;
  }
}
.flip-list-enter-active,
.flip-list-leave-active {
  transition: all 2s;
}
.flip-list-enter,
.flip-list-leave-active {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.style {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  img {
    width: 25px;
    height: 24px;
    margin-left: 10px;
    display: block;
  }
  /deep/.el-input__inner {
    width: 200px;
    outline: none;
    border-color: transparent !important;
  }

  /deep/.el-select .el-input.is-focus .el-input__inner {
    border-color: transparent;
  }
}

/deep/.el-input-group__append:hover {
  cursor: pointer;
}
.title {
  position: absolute;
  z-index: 10;
}
.name {
  color: #2d7edf;
  padding-top: 68px;
  padding-left: 40px;
}
h6 {
  color: #2d7edf;
  padding-left: 40px;
}
.form {
  height: 580px;
  width: 336px;
  padding: 0 30px;
  padding-top: 20px;
  background: #fff;
}
.el-form {
  margin: 0 auto 20px;
  text-align: center;
  width: 258px;
}
.form_top {
  text-align: center;
  padding: 60px 0 20px;
  img {
    width: 150px;
    // height: 100px;
    display: inline-block;
    margin: 0 auto;
  }
  span {
    font-size: 15px;
    color: #0083ef;
    display: block;
    line-height: 50px;
    font-weight: bold;
  }
}
.form-input {
  float: left;
  width: 250px;
  height: auto;
}
#btn {
  float: left;
  width: 260px;
  border-radius: 5px;
  color: white;
  letter-spacing: 0.5em;
  padding-left: 30px;
  outline: none;
  margin-left: 0;
  text-align: center;
}
#btnone {
  float: left;
  width: 260px;
  border-radius: 5px;
  background-color: #f2a626;
  color: white;
  letter-spacing: 0.2em;
  outline: none;
  margin-bottom: 24px;
}
.info {
  clear: both;
  display: block;
  padding-top: 20px;
  color: red;
  font-size: 12px;
  color: #2d7edf;
  .record {
    float: left;
  }
  p {
    float: right;
    margin: 0;
    padding: 0;
  }
}
// 背景图片
.bg_sginin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/deep/.el-carousel__button {
  width: 15px !important;
}
/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
/deep/ .el-dialog__footer {
  border-top: 1px solid #d9d9d9;
  margin-top: -20px;
  padding: 15px 30px 15px 30px;
}
/deep/.el-dialog {
  position: relative;
  border-radius: 10px;
  #footreBtn {
    background-color: #f2a626;
    width: 152px;
    border-radius: 4px;
    letter-spacing: 0.1em;
    border-color: #fff;
  }
  /deep/.el-form {
    margin: 0;
  }
}
/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
}
/deep/.el-dialog__header {
  padding: 15px 30px 15px 30px;
  border-bottom: 1px solid #d9d9d9;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 25px;
  color: #333333;
}
/deep/ .el-dialog__close {
  margin-top: 4px;
  font-size: 20px;
}
/deep/.label {
  color: red;
}
.former {
  position: absolute;
  left: 41px;
  top: 116px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}

.hintDialog {
  /deep/.el-dialog__footer {
    border-top: none;
  }
}
#later {
  color: #999999;
  width: 120px;
}
#immediately {
  width: 120px;
}
.centerDialog {
  padding: 0 10px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}
/deep/.el-carousel__indicators--horizontal {
  bottom: 60px;
}
.userStyle {
  /deep/.el-input__inner {
    padding-left: 50px;
  }

  /deep/.el-icon-user:before {
    padding-left: 8px;
    font-size: 23px;
    color: #3395fb;
  }
}
.passStyle {
  /deep/.el-input__inner {
    padding-left: 50px;
  }
  /deep/.el-icon-lock:before {
    padding-left: 8px;
    font-size: 23px;
    color: #3395fb;
  }
}
.gray {
  background-color: #7f7f7f;
  border-color: #fff;
}
.blue {
  background-color: #3394fe;
  border-color: #fff;
}
.versions {
  /deep/.el-dialog .el-dialog__header {
    background-color: #fff;
    border-bottom: 0;
  }
  /deep/.el-dialog__body {
    box-sizing: border-box;
    padding: 30px 30px;
  }
  /deep/.el-dialog__footer {
    border-top: 0;
  }
}
.one,
.two,
.three {
  padding: 25px 30px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  background-color: #f4f6f9;
  p {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  span {
    display: inline-block;
    margin-top: 16px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .imgbox {
    height: 210px;
    display: flex;
    align-items: center;
    width: 100%;
    img {
      width: 100%;
      height: auto;
    }
  }
}
.two_box {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.one_box {
  display: flex;
  align-items: center;
  justify-content: center;
  .one_box_wu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: rgba(204, 204, 204, 0.39);
    border-radius: 16px;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }
  .dottedline {
    position: relative;
    width: 80px;
    height: 0px;
    text-align: center;
    border-bottom: 4px dashed #cccccc;
    margin: 0 20px 0 15px;
  }
  .dottedline::after {
    position: absolute;
    left: 81px;
    top: -5px;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 12px solid #cccccc;
    border-bottom: 7px solid transparent;
  }
  .dingdingBox {
    width: 72px;
    height: 72px;
    overflow: hidden;
  }
}
/deep/.el-step__title.is-success,
/deep/.el-step__title.is-process {
  color: #3395fb;
}
/deep/.el-step__head.is-success,
/deep/.el-step__head.is-process {
  color: #3395fb;
  border-color: #3395fb;
}
</style>
